<template>
  <div>
    <el-dialog
      title="云智衢江"
      :visible.sync="dialogVisible"
      width="850px"
      height="800px"
      :modal="false"
      custom-class="deep"
    >
      <div class="handeld-command">
        <div class="handeld-title">
          <span class="circle"></span>
          <span class="title-text">基本事件信息</span>
        </div>
        <div v-if="sourceId"></div>
        <el-form
          :model="formData"
          ref="formData"
          :rules="formRules"
          label-width="80px"
          class="handeld-form"
        >
          <el-form-item label="事件简报" prop="desc">
            <el-input type="textarea" v-model="formData.desc" :autosize="{ minRows: 2, maxRows: 6 }"></el-input>
          </el-form-item>
          <el-form-item label="乡镇" prop="fromwhere">
            <el-cascader
              ref="fromwhereCascader"
              v-model="formData.fromwhere"
              :options="areaOptions"
              @change="regionCascaderChange"
              placeholder="选择乡镇"
              :props="{ checkStrictly: true, emitPath: false }"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="事件分类" prop="type">
            <el-cascader
              ref="typeCascader"
              v-model="formData.type"
              :options="typeOptions"
              :show-all-levels="false"
              placeholder="选择事件分类"
              :props="{ expandTrigger: 'hover' }"
            ></el-cascader>
          </el-form-item>
          <div class="handeld-title fujian">
            <span class="circle"></span>
            <span class="title-text">附件</span>
            <el-form-item label label-width="0" class="upload-img">
              <el-upload
                multiple
                class="upload-demo"
                :action="baseURL + 'society/olap/file'"
                :on-success="UploadSuccess"
                :on-remove="handleRemove"
                :file-list="fileList"
              >
                <img src="../../assets/image/left/upload.png" alt="" />
              </el-upload>
            </el-form-item>
          </div>
          <div class="handeld-title">
            <span class="circle"></span>
            <span class="title-text">选择处置单位</span>
            <el-form-item label="选择单位" prop="unit">
              <el-cascader
                ref="areaCascader"
                v-model="formData.unit"
                :options="areaOptions"
                @change="areaCascaderChange"
                :props="{ checkStrictly: true, emitPath: false }"
                placeholder="请选择单位"
              ></el-cascader>
            </el-form-item>
          </div>
          <div class="handeld-title handheld-line divi">
            <span class="circle"></span>
            <span class="title-text">已选单位</span>
            <el-form-item label label-width="0">
              <el-tag
                v-for="tag in areaList"
                :key="tag"
                closable
                class="color-fff"
                @close="handleClose(tag)"
              >
                {{ tag }}
              </el-tag>
            </el-form-item>
          </div>
          <div class="handeld-title handheld-line">
            <span class="circle"></span>
            <span class="title-text">协同人员</span>
            <el-form-item label label-width="0">
              <div class="handeld-accompany">
                <el-button @click.native="handleSelectPeople" type="primary" plain style="float:right">钉钉选人</el-button>
                <!-- <div
                  class="item font-13 color-FED pull-right"
                  @click="handleSelectPeople"
                >
                  钉钉选人
                </div> -->
              </div>
            </el-form-item>
          </div>
          <el-form-item class="form-btns">
            <el-button type="info" size="mini" plain @click="cancelForm"
              >取消</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="submitForm('messageForm')"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getQyyu,
  getAllBuMen,
  createHandheld,
  getDingDingId,
  getHistoryPalmRoom,
  getPalmRoomProcess,
  getUserInfo,
  getIncidentType,
  getEventListDetail,
} from "../../utils/api";
import { mapGetters } from "vuex";
export default {
  name: "yzqj",
  // props: ["source", "sourceId"],
  data() {
    return {
      source: "",
      sourceId: "",
      dialogVisible: false,
      formData: {
        desc: null,
        fromwhere: null,
        area: null,
        files: [],
        unit: null,
        create_uid: "GE_a21494423ea643f59e4a449ab935a165",
      },
      formRules: {
        desc: [{ required: true, message: "请填写事件简报", trigger: "blur" }],
        fromwhere: [
          { required: true, message: "请选择乡镇", trigger: "change" },
        ],
        type: [
          { required: true, message: "请选择事件分类", trigger: "change" },
        ],
        unit: [{ required: true, message: "请选择单位", trigger: "change" }],
      },
      fileList: [],
      areaOptions: [],
      BMselectShow: false,
      areaList: [],
      typeOptions: [],
    };
  },
  watch: {
    source: {
      deep: true,
      handler: function (val) {
        if (val.url) {
          console.log(val.url);
        }
      },
    },
    sourceId: {
      deep: true,
      handler: function () {
        this.getHistoryPalmRoom();
      },
    },
  },
  mounted() {
    window.handeldCommandInit = this.handeldCommandOpen;
    this.getUserInfo();
    this.getQyyu();
    this.getIncidentType();
  },
  computed: {
    ...mapGetters(["currentUser"]),
    baseURL() {
      return `http://${window.document.location.host}/`;
    },
  },
  methods: {
    handeldCommandOpen(source, sourceId) {
      this.dialogVisible = true;
      this.source = source;
      this.sourceId = sourceId;
      if (!this.sourceId) {
        this.getHistoryPalmRoom();
      } else {
        this.getEventListDetail();
      }
    },
    getHistoryPalmRoom() {
      getHistoryPalmRoom({ userid: this.formData.create_uid }).then((res) => {
        if (res.data.status !== 200) {
          this.$message.error(res.data.message);
        }
      });
    },
    getUserInfo() {
      getUserInfo().then((res) => {
        this.getDingDingId(res.data.cellPhone);
      });
    },
    getPalmRoomProcess() {
      getPalmRoomProcess().then((res) => {
        console.log(res);
      });
    },
    getDingDingId(phone) {
      // const phone = '13567002209'
      getDingDingId(phone).then((res) => {
        if (res.status === 200) {
          this.formData.create_uid = res.data;
          console.log(res.data);
        } else {
          this.$message("获取会议室失败！");
        }
      });
    },
    getQyyu() {
      let that = this;
      getQyyu().then((res) => {
        if (res.data.success) {
          that.areaOptions = res.data.data[0].children;
        }
      });
    },
    getEventListDetail() {
      if (!this.sourceId) {
        return;
      }
      getEventListDetail(this.source, this.sourceId).then((res) => {
        if (res.status === 200) {
          const { content } = res.data.data;
          this.$set(this.formData, "desc", content);
        }
      });
    },
    handleClose(tag) {
      this.areaList.splice(this.areaList.indexOf(tag), 1);
    },
    handleSelectPeople() {},
    regionCascaderChange(value) {
      if (value === "330803000000") {
        // 选择在区
        this.BMselectShow = true;
        getAllBuMen().then((res) => {
          if (res.success) {
            this.BUOptions = res.data[0].children;
          }
        });
      }
    },
    areaCascaderChange() {
      //   let currentVal = value;
      let currentLabels = this.$refs["areaCascader"].getCheckedNodes()[0].label;
      //   this.Area.push({ name: currentLabels, value: currentVal });
      this.areaList.push(currentLabels);
    },
    UploadSuccess(response) {
      if (response.success) {
        this.formData.files.push(response.data);
      } else {
        this.$message.error("上传失败");
      }
    },
    handleRemove(file) {
      const fileId = file.response.data.fileId;
      const index = this.formData.files.findIndex((v) => v.fileId === fileId);
      this.formData.files.splice(index, 1);
    },
    cancelForm() {
      this.$emit("isCloseForm", false);
    },
    submitForm() {
      this.formData.area = this.areaList.join(",");
      this.$refs["formData"].validate((valid) => {
        if (valid) {
          const fromwhere = this.source;
          const type = this.$refs.typeCascader.getCheckedNodes(true)[0].data
            .label;
          const area = this.$refs.fromwhereCascader.getCheckedNodes()[0].data
            .label;
          const unit = this.$refs.areaCascader
            .getCheckedNodes()
            .map((item) => item.data.label);
          createHandheld({
            ...this.formData,
            eventId: this.sourceId,
            type,
            fromwhere,
            area,
            unit,
          }).then((res) => {
            if (res.status === 200) {
              console.log(res.data.show_url, "res.data.show_url");
              this.$emit("showIframe", res.data.show_url);
            }
          });
        }
      });
    },

    // 获取当前事件分类
    getIncidentType() {
      getIncidentType().then((res) => {
        this.typeOptions = res.data.data.data;
      });
    },
  },
};
</script>
<style scoped>
.el-dialog__wrapper {
  width: 3096px;
  overflow: unset !important;
}
.handeld-command {
  margin: 0 50px;
  color: white;
}

/* 字体设置 */
/* el-dialog的标题字体大小 */
.title-text{
  font-size: 20px;
  color: #75FAFF;
}
.divi{
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}
.handeld-title{
  margin-bottom:15px;
  padding-top: 15px;
}
.upload-img{
  margin-top:15px;
}
</style>

